<template>
  <el-row>
    <!-- 头部 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <el-breadcrumb :separator-icon="ArrowRightBold">
          <el-breadcrumb-item :to="{ path: '/admin_index' }"
            >首页</el-breadcrumb-item
          >
          <el-breadcrumb-item>开奖管理</el-breadcrumb-item>
          <el-breadcrumb-item>红包接龙</el-breadcrumb-item>
        </el-breadcrumb>
      </el-card>
    </el-col>
    <div style="padding: 5px"></div>
    <!-- 内容区域 -->
    <el-col :span="24">
      <el-card shadow="hover">
        <template #header>
          <div style="display: flex; align-items: center">
            <el-input
              style="width: 260px"
              v-model="inputval"
              placeholder="请输入开奖期号"
            />
            <div style="padding: 5px"></div>
            <el-button type="primary" :icon="Search" @click="inputSearch()"
              >搜索</el-button
            >
          </div>
        </template>

        <!-- 表格 -->
        <el-table :data="tableData.list" :border="true" style="width: 100%">
          <el-table-column prop="id" label="序号" width="100" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.id }}</div>
            </template>
          </el-table-column>

          <el-table-column label="游戏类型">
            <template #default="">
              <el-tag>红包接龙</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="issue" label="红包期数" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.issue }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="number" label="抢包明细" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.number }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="time" label="发包时间" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.time }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="结束时间" >
            <template #default="scope">
              <div style="font-weight: bold;">{{ scope.row.create_time }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="create_time" label="输赢情况" />

          <el-table-column label="订单操作" width="120">
            <template #default="scope">
              <el-button type="success" @click="detail(scope.row)"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->

        <div style="padding: 10px"></div>
        <el-pagination
          v-model:currentPage="page.pagenum"
          v-model:page-size="page.pagesize"
          :page-sizes="[20, 50]"
          :small="small"
          :background="background"
          layout="total, prev, pager, next, jumper"
          :total="page.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { request_post } from "@/common/axios/request.js";
import { success, error } from "@/common/tool/message.js";
import { ArrowRightBold, UserFilled, Search } from "@element-plus/icons-vue";
const tableData = reactive({ list: [] });

onMounted(() => {
  admin_aomen_issue();
});

// 搜索
const inputval = ref("");
function inputSearch() {
  if (inputval.value == "") {
    return error("请输入代理UID");
  }
  page.issue = inputval.value;
  admin_aomen_issue();
}

// 获取用户列表
function admin_aomen_issue() {
  request_post("/admin_aomen_issue", page).then((res) => {
    if (res.data.code == 200) {
      tableData.list = res.data.data.data;
      page.total = res.data.data.total;
    } else {
      return error(res.data.msg);
    }
  });
}

const page = reactive({
  issue: "",
  pagenum: 1,
  pagesize: 18,
  total: 0,
});

function handleSizeChange(val) {
  page.pagenum = val;
  admin_aomen_issue();
}
function handleCurrentChange(val) {
  page.pagenum = val;
  admin_aomen_issue();
}
</script>

<style></style>
